import { fetchGetAllPages } from '@/apis/user';
import { Space, Table, Tag, Card, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import TableCard from '@/components/card/tablecard'

function App() {
    const [list, setList] = useState([])
    const [loading, setLoading] = useState(true)
    const [params,setParams]=useState({
        name:''
    })
    // 获取角色信息
    const getList = async () => {
        let res = await fetchGetAllPages(params)
        let { code, data: _list } = res.data
        if (code == 200) {
            setList(changeMenu(_list))
        }
        setLoading(false)
    }
    // 递归 菜单数据的childre
    const changeMenu = (menus) => {
        menus.forEach(item => {
            if (item.children.length) {
                return changeMenu(item.children)
            }
            return delete item.children
        })
        return menus
    }
    useEffect(() => {
        getList()
    }, [params])
    const columns = [
        {
            title: '菜单名',
            dataIndex: 'name',
            key: 'name',
            width: 180
        },
        {
            title: '菜单地址',
            dataIndex: 'urlPath',
            key: 'urlPath',
            ellipsis: {
                showTitle: false,
            },
            render: urlPath => (
                <Tooltip placement="topLeft" title={urlPath}>
                    {urlPath}
                </Tooltip>
            ),
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: ({ status }) => {
                // 0正常 1禁用
                let color = status ? 'volcano' : 'geekblue';
                return (
                    <Tag color={color} key={status}>
                        {!status ? '正常' : '禁用'}
                    </Tag>
                )
            }
        },
        {
            title: '创建时间',
            key: 'createTime',
            dataIndex: 'createTime',
            ellipsis: {
                showTitle: false,
            },
            render: createTime => (
                <Tooltip placement="topLeft" title={createTime}>
                    {createTime}
                </Tooltip>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>编辑</a>
                    <a>删除</a>
                </Space>
            ),
        },
    ];
    const getParamsVal=(v)=>{
        setParams({
            ...params,
            ...v
        })
    }
    return (
        <>
            <TableCard btnLabel="菜单" getParamsVal={getParamsVal}></TableCard>
            <Card
                style={{ width: '100%' }}
            >
                <Table loading={loading}
                    columns={columns} rowKey="id" dataSource={list} />

            </Card></>
    )

}
export default App;